<template>
  <el-card class="header-card">
    <el-page-header icon="el-icon-arrow-left" @back="goBack" title="返回">
      <template #content>
        个人主页
      </template>
    </el-page-header>
  </el-card>

  <el-row>
    <el-col :xs="0" :md="24">
      <el-card class="box-card">
        <div>
          <img src="../assets/img/head.jpg" style="width: 60px; height: 60px; overflow: hidden; border-radius: 50%; border: 1px solid #000000" alt="">
        </div>
        <el-descriptions title="个人信息" :column="2" border >
          <el-descriptions-item label="昵称:">{{user.nickName}}</el-descriptions-item>
          <el-descriptions-item label="邮箱:">{{user.email}}</el-descriptions-item>
          <el-descriptions-item label="手机号:">{{user.phone}}</el-descriptions-item>
          <el-descriptions-item label="身份">{{user.identity}}</el-descriptions-item>
          <el-descriptions-item label="介绍">{{user.summary === 'null'? '暂无': user.summary}}</el-descriptions-item>
        </el-descriptions>
        <el-button @click="logout()" type="info" round>退出登录</el-button>
      </el-card>
    </el-col>
  </el-row>

  <el-row style="margin-top: 30px">
    <el-col :xs="24" :sm="0">
      <el-card>
        <div>
          <img src="../assets/img/head.jpg" style="width: 60px; height: 60px; overflow: hidden; border-radius: 50%; border: 1px solid #000000" alt="">
        </div>
        <el-descriptions title="个人信息" :column="1" border >
          <el-descriptions-item label="昵称:">{{user.nickName}}</el-descriptions-item>
          <el-descriptions-item label="邮箱:">{{user.email}}</el-descriptions-item>
          <el-descriptions-item label="手机号:">{{user.phone}}</el-descriptions-item>
          <el-descriptions-item label="身份">{{user.identity}}</el-descriptions-item>
          <el-descriptions-item label="介绍">{{user.summary === 'null'? '暂无': user.summary}}</el-descriptions-item>
        </el-descriptions>
        <el-button @click="logout()" type="info" round>退出登录</el-button>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import router from "@/router";
import {onBeforeMount, reactive, toRefs} from "vue";
import {getUser, removeUser} from "@/utils/cookies";
export default {
  name: "user",
  setup() {

    const data = reactive({
      user: {
      },
      rules: {
        email: [
          {required: true, message: '邮箱不能为空', trigger: 'blur'},
          {min: 5, max: 32, message: '邮箱长度在5-32个字符之间', trigger: 'blur'},
          {type: 'email', message: '邮箱格式错误', trigger: 'blur'},
        ],
        pass: [
          {required: true, message: '密码不能为空', trigger: 'blur'},
          {min: 5, max: 20, message: '密码长度在5-20个字符之间', trigger: 'blur'}
        ],
      }
    })
    const goBack = () => {
      router.push('/')
    }

    const logout = () => {
      removeUser()
      goBack()
    }
    onBeforeMount(() => {
      data.user = getUser()
    })
    return {
      ...toRefs(data),
      goBack,
      logout
    }
  }
}
</script>

<style lang="less" scoped>
.header-card{
  height: 60px
}

.box-card{
  width: 1000px;
  margin: 30px auto;
  min-height: 500px;
}
.el-button{
  margin-top: 30px;
}
</style>
